<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>登录</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/login.css">
	<link rel="stylesheet" href="css/sign-up-login.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/inputEffect.css" />
	<link rel="stylesheet" href="css/tooltips.css" />
	<link rel="stylesheet" href="css/spop.min.css" />

	<!-- <script src="js/jquery.min.js"></script>
	<script src="js/snow.js"></script>
	<script src="js/jquery.pure.tooltips.js"></script>
	<script src="js/spop.min.js"></script> -->


	<style type="text/css">
		html {
			width: 100%;
			height: 100%;
		}

		body {

			background-repeat: no-repeat;

			background-position: center center #2D0F0F;

			background-color: #00BDDC;

			background-image: url(images/snow.jpg);

			background-size: 100% 100%;

		}

		.snow-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			z-index: 100001;
		}
	</style>
</head>

<body>
	<!-- 雪花背景 -->
	<div class="snow-container"></div>
	<!-- 登录控件 -->
	<div id="login">
		<input id="tab-1" type="radio" name="tab" class="sign-in hidden" checked />
		<input id="tab-2" type="radio" name="tab" class="sign-up hidden" />
		<input id="tab-3" type="radio" name="tab" class="sign-out hidden" />
		<div class="wrapper">
			<!-- 登录页面 -->
			<div class="login sign-in-htm">
				<form class="container offset1 loginform">
					<!-- 猫头鹰控件 -->
					<div id="owl-login" class="login-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="login-username"
									autocomplete="off" placeholder="请输入用户名" tabindex="1" maxlength="15" />
								<label class="input__label input__label--hideo" for="login-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="login-password"
									placeholder="请输入密码" tabindex="2" maxlength="15" />
								<label class="input__label input__label--hideo" for="login-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
						</section>
					</div>
					<div class="form-actions">
						<a tabindex="5" class="btn btn-link text-muted" onClick="goto_register()">注册</a>
						<input class="btn btn-primary" type="button" tabindex="3" onClick="login()" value="登录"
							style="color:white;" />
					</div>
				</form>
			</div>


			<!-- 注册页面 -->
			<div class="login sign-up-htm">
				<form action="#" method="post" class="container offset1 loginform">
					<!-- 猫头鹰控件 -->
					<div id="owl-login" class="register-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="username"
									autocomplete="off" placeholder="请输入用户名" maxlength="15" />
								<label class="input__label input__label--hideo" for="username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="nickname"
									autocomplete="off" placeholder="请输入昵称" maxlength="15" />
								<label class="input__label input__label--hideo" for="nickname">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="password"
									placeholder="请输入密码" maxlength="15" />
								<label class="input__label input__label--hideo" for="password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="repassword"
									placeholder="请确认密码" maxlength="15" />
								<label class="input__label input__label--hideo" for="repassword">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="file" id="head_logo"
									autocomplete="off" />
								<label class="input__label input__label--hideo">
									<i class="fa fa-fw fa-wifi icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
						</section>
					</div>
					<div class="form-actions">
						<a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a>
						<input class="btn btn-primary" type="button" onClick="register()" value="注册"
							style="color:white;" />
					</div>
				</form>
			</div>
		</div>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<script src="js/login.js"></script>
	<script>
		var $username = $("#username");
		var $nickname = $("#nickname");
		var $password = $("#password");
		var $headlogo = $("#head_logo");
		var time;
		function register() {

			var data = {
				username: $username.val(),
				nickname: $nickname.val(),
				password: $password.val(),
				headlogo: null
			}
			var repasswprd = $("#repassword").val()
			if (!(data.username && data.nickname && data.password)) {
				alert("输入为空")
				return;
			}
			if (!(data.password == repasswprd)) {
				alert("你两次输入的密码不一致")
				return;
			}
			// console.log(username)
			$.ajax({
				type: "post",  //数据提交方式（post/get）
				url: "http://118.24.25.7/chat_api/interface/reg.php",  //提交到的url
				data: data,//提交的数据
				dataType: "json",//返回的数据类型格式
				success: function (res) {
					console.log(res)
					if (res.code == 0) {
						// alert("注册成功，请返回登录界面登录")
						var str = `
                			<div class="tooltips">
                    			<div class="tooltips-title">
                        			注册成功，请返回登录界面登录。
                    			</div>
                			</div>`
						$box.append(str)
						var $tooltips = $(".tooltips")
						time = setTimeout(function () {
							$tooltips.css("display", "none")
							clearTimeout(time)
						}, 1200)
					} else {

						alert("注册失败，" + res)

					}

				}

			});
		}
		function login() {
			var username = $("#login-username").val();
			var password = $("#login-password").val();
			// console.log(username)
			$.ajax({
				type: "post",  //数据提交方式（post/get）
				url: "http://118.24.25.7/chat_api/interface/login.php",  //提交到的url
				data: {
					username: username,
					password: password

				},//提交的数据
				dataType: "json",//返回的数据类型格式
				success: function (res) {
					if (res.code == 0) {
						alert("登录成功")
						location.href = "index.html"
						console.log(res)
						localStorage.setItem('user_id', res.data.id)
						localStorage.setItem('sign_str', res.data.sign_str)
						var userData = {
							user_id: res.data.id,
							sign_str: res.data.sign_str,
							nickname: res.data.nickname,
							head_logo: res.data.head_logo,
							username: res.data.username
						}
						localStorage['userData'] = JSON.stringify(userData);
					} else {
						alert("登录失败" + res)

					}

				}

			});
		}


		// console.log(username);
	</script>
</body>

</html>